<template>
  <el-container>
    <el-header style="height: 120px;">
      <div style="padding-top: 45px; margin-left: 230px;">
        <el-form :inline="true" :model="filters" :rules="filtersRules" ref="filters" :size="size">
          <el-form-item prop="channelId">
            <el-select
                style="width: 350px;"
                v-model="filters.channelId"
                clearable
                filterable
                remote
                reserve-keyword
                @change="choseCustomer"
                placeholder="请选择渠道"
              >
                <el-option
                  v-for="item in channelOptions"
                  :key="item.id"
                  :label="item.channelName"
                  :value="item.id"
                ></el-option>
              </el-select>
          </el-form-item>
           <el-form-item prop="categoryId">
             <el-select
                style="width: 350px;"
                v-model="filters.categoryId"
                clearable
                filterable
                remote
                reserve-keyword
                @change="choseCustomer1"
                placeholder="请选择类目树"
              >
                <el-option
                  v-for="item in categorylOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
           </el-form-item>
          <el-form-item>
            <kt-button icon="fa fa-pencil" label="设置" type="primary" @click="setCate"/>
          </el-form-item>

        </el-form>
      </div>
    </el-header>
  </el-container>
</template>

<script>
import PopupTreeInput from "@/components/PopupTreeInput";
import CyTable from "@/views/Core/CyTable";
import KtButton from "@/views/Core/KtButton";
import TableColumnFilterDialog from "@/views/Core/TableColumnFilterDialog";
import { format } from "@/utils/datetime";
import utils from "@/assets/js/utils.js";
export default {
  components: {
    PopupTreeInput,
    CyTable,
    KtButton,
    TableColumnFilterDialog
  },
  data() {
    return {
      size: "small",
      channelOptions:[],
      categorylOptions:[],

      filters: {
        channelId:"",
        categoryId:"",
      },
      pageRequest: {pageNum: 1, pageSize: 10},
      dataForm: {
        tableData: [
          {
            id:'',
            normalText: "",
            customizeText: ""
          },
        ]
      },
      filtersRules: {
        channelId: [
          {required: true, message: '请选择渠道', trigger: 'blur'}
        ],
        categoryId: [
          {required: true, message: '请选择类目树', trigger: 'change'}
        ],
      }
    };
  },

  methods: {
    // 获取分页数据
    findPage: function() {
     var this_ = this;
     var search = {};
     search.channelId=31
     this.utils.request.queryChannelCategoryInfo(search, function(res) {
          if(res.code == '0000'){
              this_.filters.channelId = res.data.data[0].channelId;
              this_.filters.categoryId = res.data.data[0].categoryId;
              this_.filters.id = res.data.data[0].id;
          }
        });
    },
    //查询后台渠道
    remoteMethod: function() {
        var this_ = this;
        //查询后台客户信息
        var search = {};
        search.channelName="BBC"
        //search.name = query;
        this.utils.request.queryChannelListOther(search, function(res) {
          this_.channelOptions = res.data;
        });

    },
    //查询后台类目
    querycategory: function() {
        var this_ = this;
        //查询后台客户信息
        var search = {};
        //search.name = query;
        this.utils.request.queryPageProductCategory(search, function(res) {
          this_.categorylOptions = res.data.rows;

          this_.findPage();
        });

    },
    //重置
    choseCustomer(data) {
      this.filters.channelId=data
    },
    choseCustomer1(value) {
      this.filters.categoryId=value
    },

    setCate: function() {
      this.$refs.filters.validate((valid) => {
        if (valid) {
          let this_ = this;
          let params = Object.assign({}, this.filters);
          params.id=this_.filters.id
          if(params.channelId !=undefined && params.categoryId != undefined){
            params.status=1
            params.deleteFlag=0
            this.utils.request.saveChannelCategoryInfo(params, function (res) {
              if (res.code == "0000") {
                this_.$message({message: "操作成功", type: "success"});
                this_.findPage(null);
              } else {
                this_.$message({
                  message: "操作失败, " + res.msg,
                  type: "error"
                });
              }
            });
          }else{
            this_.$message({message:'请选择需要操作的数据',type:'error'})
          }
        } else {
          return false;
        }
      });
     }
  },
  mounted() {
    this.remoteMethod()
    this.querycategory()
  }
};
</script>

<style scoped>
.bg-purple {
  background: #d3dce6;
}
.el-header {
  background-color: #f6f8f8;
  color: #333;
  text-align: center;
  line-height: 120px;
}

.el-main {
  background-color: #ffffff;
  color: #333;
  text-align: center;
  line-height: 500px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

/deep/ .setTextareaHight .el-textarea__inner {
  height: 180px;
}
</style>
